<template>
  <div class="index5-box">
    <div class="mokuai1">
      <h2 class="h2color">vue计算属性</h2>
      <h3 class="h3color">当文字超过七个则省略显示否则全部显示使用计算属性完成</h3>
      <p>{{shenglue}}</p>
      <h3>使用方法完成,但是需要传参</h3>
      <p>{{meth(ttiele)}}</p>
      <h4 class="colorred">区别：以上两种都能实现，但是方法的需要加（）,计算属性有缓存</h4>
    </div>
     <div class="mokuai1">
      <h2 class="h2color">vue侦听器</h2>
      <h3 class="h3color">需求：实时监听变化，当输入是qwe，则打印口令正确</h3>
      <input type="text" v-model="jianting">
      <p>{{jianting}}</p>
   
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ttiele: "凤凰军事电话开始开发",
      jianting:""
    };
  },
  methods: {
    meth() {
      //  若是文字的长度大于6，则截取
      if (this.ttiele.length > 6) {
        return this.ttiele.substring(0, 6) + "....";
      } else {
        return this.ttiele;
      }
    }
  },
  computed: {
    shenglue() {
      //  若是文字的长度大于6，则截取
      if (this.ttiele.length > 6) {
        return this.ttiele.substring(0, 6) + "....";
      } else {
        return this.ttiele;
      }
    }
  },
//   监听
watch:{
    jianting(newvalue,oldvalue){
        console.log("新值"+newvalue)
        console.log("旧址"+oldvalue)
        // 当输入的值是qwe则回答准确
        if (this.jianting=="qwe") {
            console.log("口令正确")
        }
    }
}
};
</script>

<style  scoped>
.mokuai1 {
  border: 1px solid red;
  margin-bottom: 30px;
}
.colorred {
  color: red;
}
h2 {
  color: aqua;
}
h3 {
  color: brown;
}
</style>>